<template>
  <div class="page-container">
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>营销工具</el-breadcrumb-item>
        <el-breadcrumb-item>大转盘模板管理</el-breadcrumb-item>
        <el-breadcrumb-item>创建模板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form
      :model="ruleForm"
      :rules="ruleFormRules"
      label-width="100px"
      class="ruleForm ruleFormBig"
      label-position="left"
      ref="ruleForm"
    >
      <el-form-item label="选择模板：" prop="selectModel" required>
        <el-select
          v-model="ruleForm.selectModel"
          @change="selectModelChanged"
          :disabled="isEdit"
          clearable
        >
          <el-option
            v-for="item in ruleForm.options"
            :key="item.id"
            :label="item.templateName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板名称：" prop="name" class="ruleFormName">
        <el-input v-model="ruleForm.name" placeholder="输入模板名称" maxlength="64" clearable required class="mr15" ></el-input>
        <el-tooltip
                popper-class="atooltip"
                effect="dark"
                content="模板名称不能重复"
                placement="right"
              > 
              <span class="tipsInfo">!</span>
          </el-tooltip>
      </el-form-item>
    </el-form>
    <div class="create flex">
      <el-main class="partLeft">
        <div class="mainTab">
          <el-button
            v-for="(item,index) in mainTab.list"
            :key="index"
            @click="mainTab.current=index"
            type="primary"
            :class="{resetButton : mainTab.current!=index , searchButton : mainTab.current == index}"
          >{{item.name}}</el-button>
        </div>
        <!-- 大转盘 -->
        <div
          class="lottery"
          :class="mainTab.current != 0 ?'':'addLotteryLen'"
          :style="{backgroundImage: 'url(' + descJson.homeJson.mainBgImage + ')' }"
        >
          <div class="phone">
            <img v-if="mainTab.current == 0" src="/static/images/lottery/phone2.png" alt />
            <img v-else src="/static/images/lottery/phone.png" alt />
          </div>
          <div class="turnplate">
            <div class="realCanvas">
              <canvas ref="myCanvas" id="myCanvas" width="333" height="333"></canvas>
              <div class="pointer">
                <span :style="{background:descJson.homeJson.drawButtonColor}">
                  点击
                  <br />抽奖
                </span>
                <img src="/static/images/lottery/btn.png" alt />
              </div>
            </div>
          </div>
          <div class="count">今日免费抽奖次数：10</div>
          <div class="rule" v-if="actRule.desc &&mainTab.current==0">
            <p class="tit">活动规则</p>
            <div class="rule-info">
              <pre v-html="actRule.desc" class="des"></pre>
            </div>
          </div>
          <!-- 中奖啦 -->
          <div v-if="mainTab.current==1" class="box">
            <div
              class="info"
              :style="{backgroundImage: 'url(' + descJson.winningJson.bgImage + ')' }"
            >
              <h3>中奖啦</h3>
              <div class="img">
                <img :src="descJson.winningJson.winImage" alt />
              </div>
              <div class="name">
                <p>一等奖</p>
                <p>奖品名称</p>
              </div>
              <el-button
                class="btn"
                :style="{background: descJson.winningJson.editUserInfoButtonColor}"
              >编辑个人信息</el-button>
            </div>
          </div>
          <!-- 谢谢参与，再接再厉 -->
          <div class="box" v-if="mainTab.current==2">
            <div
              class="info"
              :style="{backgroundImage: 'url(' + descJson.noWinningJson.bgImage + ')' }"
            >
              <h3>谢谢参与，再接再厉</h3>
              <div class="img">
                <img :src=" descJson.noWinningJson.noWinImage" alt />
              </div>
              <el-button
                class="btn"
                :style="{background: descJson.noWinningJson.aginButtonColor}"
              >再来一次</el-button>
            </div>
          </div>
          <!-- 编辑个人信息 -->
          <div v-if="mainTab.current==3" class="box">
            <div
              class="info lotteryRuleForm"
              :style="{backgroundImage: 'url(' + descJson.editUserInfoJson.bgImage + ')' }"
            >
              <h3>编辑个人信息</h3>
              <el-form
                :model="lotteryRuleForm"
                ref="lotteryRuleForm"
                label-width="84px"
                label-position="right"
              >
                <el-form-item prop="name">
                  <span
                    slot="label"
                    class="label"
                    :style="{background:descJson.editUserInfoJson.confirmButtonColor}"
                  >姓名</span>
                  <el-input v-model="lotteryRuleForm.name" clearable placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item prop="mobile">
                  <span
                    slot="label"
                    class="label"
                    :style="{background:descJson.editUserInfoJson.confirmButtonColor}"
                  >手机号</span>
                  <el-input
                    v-model.number="lotteryRuleForm.mobile"
                    clearable
                    maxlength="11"
                    placeholder="请输入联系手机号"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="email">
                  <span
                    slot="label"
                    class="label"
                    :style="{background:descJson.editUserInfoJson.confirmButtonColor}"
                  >
                    邮寄
                    <br />地址
                  </span>
                  <el-input
                    type="textarea"
                    :rows="4"
                    v-model="lotteryRuleForm.email"
                    clearable
                    placeholder="请输入邮寄详细地址"
                  ></el-input>
                </el-form-item>
              </el-form>
              <el-button
                class="btn"
                :style="{background:descJson.editUserInfoJson.confirmButtonColor}"
              >确认</el-button>
            </div>
          </div>
        </div>
      </el-main>
      <div class="partRight">
        <el-form
          :model="ruleForm"
          label-width="150px"
          class="ruleForm"
          label-position="right"
          ref="form2"
        >
          <template v-if="mainTab.current==0">
            <el-row class="flex">
              <el-form-item label="模板主背景图片：" prop="name">
                <el-input
                  v-model="descJson.homeJson.mainBgImage"
                  placeholder="默认背景"
                  :disabled="true"
                ></el-input>
                <div class="tips">
                  <span>图片像素建议为750*1912px</span>
                  <span>格式为 jpg/bmp/png/gif</span>
                </div>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('mainBgImage') ">编辑</el-button>
            </el-row>
            <el-row class="flex">
              <el-form-item label="抽奖按钮颜色：" prop="name">
                <el-input
                  v-model="descJson.homeJson.drawButtonColor"
                  placeholder="默认颜色"
                  maxlength="64"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('draw') ">编辑</el-button>
            </el-row>
            <el-row class="flex">
              <el-form-item label="转盘颜色：" prop="name">
                <el-input
                  v-model="descJson.homeJson.turntableColor"
                  placeholder="默认颜色"
                  maxlength="64"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('turntable')">编辑</el-button>
            </el-row>
          </template>

          <template v-if="mainTab.current==1">
            <el-row class="flex">
              <el-form-item label="中奖背景图片：" prop="name">
                <el-input
                  v-model="descJson.winningJson.bgImage"
                  placeholder="默认背景"
                  :disabled="true"
                ></el-input>
                <div class="tips">
                  <span>图片像素建议为750*1912px</span>
                  <span>格式为 jpg/bmp/png/gif</span>
                </div>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('winBgImage') ">编辑</el-button>
            </el-row>
            <el-row class="flex">
              <el-form-item label="中奖图片：" prop="name">
                <el-input
                  v-model="descJson.winningJson.winImage"
                  placeholder="默认背景"
                  :disabled="true"
                ></el-input>
                <div class="tips">
                  <span>图片像素建议为130*130px</span>
                  <span>格式为 jpg/bmp/png/gif</span>
                </div>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('winImage') ">编辑</el-button>
            </el-row>
            <el-row class="flex">
              <el-form-item label="按钮颜色：" prop="name">
                <el-input
                  v-model="descJson.winningJson.editUserInfoButtonColor"
                  placeholder="默认颜色"
                  maxlength="64"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('winEditUser')">编辑</el-button>
            </el-row>
          </template>
          <template v-if="mainTab.current==2">
            <el-row class="flex">
              <el-form-item label="没中奖背景图片：" prop="name">
                <el-input
                  v-model="descJson.noWinningJson.bgImage"
                  placeholder="默认背景"
                  :disabled="true"
                ></el-input>
                <div class="tips">
                  <span>图片像素建议为750*1912px</span>
                  <span>格式为 jpg/bmp/png/gif</span>
                </div>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('noWinBgImage') ">编辑</el-button>
            </el-row>
            <el-row class="flex">
              <el-form-item label="没中奖图片：" prop="name">
                <el-input
                  v-model="descJson.noWinningJson.noWinImage"
                  placeholder="默认背景"
                  :disabled="true"
                ></el-input>
                <div class="tips">
                  <span>图片像素建议为130*130px</span>
                  <span>格式为 jpg/bmp/png/gif</span>
                </div>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('noWinImage') ">编辑</el-button>
            </el-row>
            <el-row class="flex">
              <el-form-item label="按钮颜色：" prop="name">
                <el-input
                  v-model="descJson.noWinningJson.aginButtonColor"
                  placeholder="默认颜色"
                  maxlength="64"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('nowinAgin')">编辑</el-button>
            </el-row>
          </template>
          <template v-if="mainTab.current==3">
            <el-row class="flex mainImg">
              <el-form-item label="个人信息背景图片：" prop="name">
                <el-input
                  v-model="descJson.editUserInfoJson.bgImage"
                  placeholder="默认背景"
                  :disabled="true"
                ></el-input>
                <div class="tips">
                  <span>图片像素建议为750*1912px</span>
                  <span>格式为 jpg/bmp/png/gif</span>
                </div>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('userBgImg') ">编辑</el-button>
            </el-row>
            <el-row class="flex">
              <el-form-item label="按钮颜色：" prop="name">
                <el-input
                  v-model="descJson.editUserInfoJson.confirmButtonColor"
                  placeholder="默认颜色"
                  maxlength="64"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-button class="searchButton" @click="initOpera('userConfirm')">编辑</el-button>
            </el-row>
          </template>
        </el-form>
      </div>
    </div>

    <div class="step-button">
      <el-button class="cancelButton" @click="back()">取消</el-button>
      <el-button class="searchButton" @click="save()">保存</el-button>
    </div>
    <!-- 主背景图 -->
    <el-dialog
      title="编辑图片"
      :close-on-click-modal="false"
      :visible.sync="mainBgImageFlag"
      class="dialogVisible el-dialog-style"
    >
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :action="imgUpload"
        :on-success="(response, file, fileList) => {getBg(response, file, fileList, 'mainBgImage')}"
        :accept="imageAccept"
      >
        <div class="flex">
          <div class="img">
            <img :src="homeJsonOpera.mainBgImage" class="bgImg" />
          </div>
          <el-button class="searchButton" icon="el-icon-upload2">上传替换</el-button>
        </div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mainBgImageFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('mainBgImage')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 中奖背景图 -->
    <el-dialog
      title="编辑图片"
      :close-on-click-modal="false"
      :visible.sync="winBgImageFlag"
      class="dialogVisible el-dialog-style"
    >
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :action="imgUpload"
        :on-success="(response, file, fileList) => {getBg(response, file, fileList, 'winBgImage')}"
        :accept="imageAccept"
      >
        <div class="flex">
          <div class="img">
            <img :src="winJsonOpera.bgImage" class="bgImg" />
          </div>
          <el-button class="searchButton" icon="el-icon-upload2">上传替换</el-button>
        </div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="winBgImageFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('winBgImage')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 中奖图 -->
    <el-dialog
      title="编辑图片"
      :close-on-click-modal="false"
      :visible.sync="winImageFlag"
      class="dialogVisible el-dialog-style"
    >
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :action="imgUpload"
        :on-success="(response, file, fileList) => {getBg(response, file, fileList, 'winImage')}"
        :accept="imageAccept"
      >
        <div class="flex">
          <div class="img">
            <img :src="winJsonOpera.winImage" class="bgImg" />
          </div>
          <el-button class="searchButton" icon="el-icon-upload2">上传替换</el-button>
        </div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="winImageFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('winImage')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 没中奖背景图 -->
    <el-dialog
      title="编辑图片"
      :close-on-click-modal="false"
      :visible.sync="noWinBgImageFlag"
      class="dialogVisible el-dialog-style"
    >
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :action="imgUpload"
        :on-success="(response, file, fileList) => {getBg(response, file, fileList, 'noWinBgImage')}"
        :accept="imageAccept"
      >
        <div class="flex">
          <div class="img">
            <img :src="nowinJsonOpera.bgImage" class="bgImg" />
          </div>
          <el-button type="primary" icon="el-icon-upload2" class="searchButton">上传替换</el-button>
        </div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="noWinBgImageFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('noWinBgImage')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 没中奖图 -->
    <el-dialog
      title="编辑图片"
      :close-on-click-modal="false"
      :visible.sync="noWinImageFlag"
      class="dialogVisible el-dialog-style"
    >
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :action="imgUpload"
        :on-success="(response, file, fileList) => {getBg(response, file, fileList, 'noWinImage')}"
        :accept="imageAccept"
      >
        <div class="flex">
          <div class="img">
            <img :src="nowinJsonOpera.noWinImage" class="bgImg" />
          </div>
          <el-button type="primary" icon="el-icon-upload2" class="searchButton">上传替换</el-button>
        </div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="noWinImageFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('noWinImage')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑背景图 -->
    <el-dialog
      title="编辑图片"
      :close-on-click-modal="false"
      :visible.sync="editBgImageFlag"
      class="dialogVisible el-dialog-style"
    >
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :action="imgUpload"
        :on-success="(response, file, fileList) => {getBg(response, file, fileList, 'userBgImg')}"
        :accept="imageAccept"
      >
        <div class="flex">
          <div class="img">
            <img :src="userInfoJsonOpera.bgImage" class="bgImg" />
          </div>
          <el-button type="primary" icon="el-icon-upload2" class="searchButton">上传替换</el-button>
        </div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editBgImageFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('userBgImg')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 主抽奖按钮颜色 -->
    <el-dialog
      title="编辑按钮颜色"
      :close-on-click-modal="false"
      :visible.sync="drawButtonColorFlag"
      class="dialogVisible el-dialog-style"
    >
      <div class="color">
        <div class="btnColor flex">
          <p>按钮颜色：</p>
          <div :style="{background:homeJsonOpera.drawButtonColor}">抽奖</div>
        </div>

        <div class="flex colorRadio">
          <el-radio
            v-model="homeJsonOpera.drawbtnRadio"
            label="1"
            border
            @change="changeColor(1,'draw')"
          >默认</el-radio>
          <el-row class="flex">
            <el-radio
              v-model="homeJsonOpera.drawbtnRadio"
              label="2"
              border
              @change="changeColor(2,'draw')"
            >自定义</el-radio>

            <el-color-picker
              v-if="homeJsonOpera.drawbtnRadio == '2'"
              v-model="homeJsonOpera.drawButtonColor"
              @change="getMainBtn"
            ></el-color-picker>
            <!-- <colorPicker v-if="drawButtonOpera" v-model="descJson.homeJson.drawButtonColor" @change="getEditBtn"/> -->
          </el-row>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="drawButtonColorFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('draw')" >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 主转盘颜色 -->
    <el-dialog
      title="编辑转盘颜色"
      :close-on-click-modal="false"
      :visible.sync="turntableColorFlag"
      class="dialogVisible el-dialog-style"
    >
      <div class="color">
        <div class="btnColor borderColor flex">
          <p>转盘颜色：</p>
          <div :style="{borderColor:homeJsonOpera.turntableColor}"></div>
        </div>

        <div class="flex colorRadio">
          <el-radio
            v-model="homeJsonOpera.turntablebtnRadio"
            label="1"
            border
            @change="changeColor(1,'turntable')"
          >默认</el-radio>
          <el-row class="flex">
            <el-radio
              v-model="homeJsonOpera.turntablebtnRadio"
              label="2"
              border
              @change="changeColor(2,'turntable')"
            >自定义</el-radio>
            <el-color-picker
              v-if="homeJsonOpera.turntablebtnRadio == '2'"
              v-model="homeJsonOpera.turntableColor"
              @change="getBar"
            ></el-color-picker>
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="turntableColorFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('turntable')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 中奖按钮颜色 -->
    <el-dialog
      title="编辑按钮颜色"
      :close-on-click-modal="false"
      :visible.sync="editUserInfoButtonColorFlag"
      class="dialogVisible el-dialog-style"
    >
      <div class="color">
        <div class="btnColor flex">
          <p>按钮颜色：</p>
          <div :style="{background:winJsonOpera.editUserInfoButtonColor}">抽奖</div>
        </div>

        <div class="flex colorRadio">
          <el-radio
            v-model="winJsonOpera.editUserbtnRadio"
            label="1"
            border
            @change="changeColor(1,'win')"
          >默认</el-radio>
          <el-row class="flex">
            <el-radio
              v-model="winJsonOpera.editUserbtnRadio"
              label="2"
              border
              @change="changeColor(2,'win')"
            >自定义</el-radio>
            <el-color-picker
              v-if="winJsonOpera.editUserbtnRadio == '2'"
              v-model="winJsonOpera.editUserInfoButtonColor"
              @change="getWinBtn"
            ></el-color-picker>
          </el-row>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserInfoButtonColorFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('winEditUser')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 未中奖按钮颜色 -->
    <el-dialog
      title="编辑按钮颜色"
      :close-on-click-modal="false"
      :visible.sync="aginButtonColorFlag"
      class="dialogVisible el-dialog-style"
    >
      <div class="color">
        <div class="btnColor flex">
          <p>按钮颜色：</p>
          <div :style="{background:nowinJsonOpera.aginButtonColor}">抽奖</div>
        </div>

        <div class="flex colorRadio">
          <el-radio
            v-model="nowinJsonOpera.noWinningbtnRadio"
            label="1"
            border
            @change="changeColor(1,'nowin')"
          >默认</el-radio>
          <el-row class="flex">
            <el-radio
              v-model="nowinJsonOpera.noWinningbtnRadio"
              label="2"
              border
              @change="changeColor(2,'nowin')"
            >自定义</el-radio>
            <el-color-picker
              v-if="nowinJsonOpera.noWinningbtnRadio == '2'"
              v-model="nowinJsonOpera.aginButtonColor"
              @change="getNoWinBtn"
            ></el-color-picker>
          </el-row>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="aginButtonColorFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('nowinAgin')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑按钮颜色 -->
    <el-dialog
      title="编辑按钮颜色"
      :close-on-click-modal="false"
      :visible.sync="confirmButtonColorFlag"
      class="dialogVisible el-dialog-style"
    >
      <div class="color">
        <div class="btnColor flex">
          <p>按钮颜色：</p>
          <div :style="{background:userInfoJsonOpera.confirmButtonColor}">抽奖</div>
        </div>

        <div class="flex colorRadio">
          <el-radio
            v-model="userInfoJsonOpera.userInfobtnRadio"
            label="1"
            border
            @change="changeColor(1,'userInfo')"
          >默认</el-radio>
          <el-row class="flex">
            <el-radio
              v-model="userInfoJsonOpera.userInfobtnRadio"
              label="2"
              border
              @change="changeColor(2,'userInfo')"
            >自定义</el-radio>
            <el-color-picker
              v-if="userInfoJsonOpera.userInfobtnRadio == '2'"
              v-model="userInfoJsonOpera.confirmButtonColor"
              @change="getEditBtn"
            ></el-color-picker>
          </el-row>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmButtonColorFlag = false" class="cancelButton">取 消</el-button>
        <el-button class="searchButton" @click="updateProperty('userConfirm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import $ from "@/assets/js/jquery.min.js";
import turntable from "@/assets/js/turntable.js";

export default {
  data() {
    return {
      id: null,
      isEdit: false,
      drawButtonColorFlag: false,
      turntableColorFlag: false,
      editUserInfoButtonColorFlag: false,
      aginButtonColorFlag: false,
      confirmButtonColorFlag: false,
      mainBgImageFlag: false, //主背景图
      winBgImageFlag: false, //中奖背景图
      winImageFlag: false, //中奖图
      noWinBgImageFlag: false, //没奖背景图
      noWinImageFlag: false, //没中奖图
      editBgImageFlag: false, //编辑背景图

      imgUpload: this.utils.imghost, //上传地址
      imageAccept: ".jpg,.png,.bmp,.gif,.JPG,.PNG,.GIF,.BMP", //图片上传格式jpg\bmp\png\gif
      ruleForm: {
        selectModel: "",
        options: [],
        name: "",
        //首页
        mainImg: "",
        mainBtn: "",
        mainBar: "",
        //中奖页面
        winBgImg: "",
        winImg: "",
        winBtn: "",
        //未中奖页面
        nowinBgImg: "",
        nowinImg: "",
        nowinBtn: ""
      },
      ruleFormRules: {
        selectModel: [
          { required: true, message: "请选择模板", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入3-64个字符", trigger: "blur" },
          {
            min: 3,
            max: 64,
            message: "请输入3-64个字符",
            trigger: "blur"
          }
        ]
      },
      mainTab: {
        current: 0,
        list: [
          {
            id: 1,
            name: "首页"
          },
          {
            id: 2,
            name: "中奖页面"
          },
          {
            id: 3,
            name: "没中奖页面"
          },
          {
            id: 4,
            name: "编辑个人信息"
          }
        ]
      },
      lotteryRuleForm: {
        name: "",
        mobile: "",
        email: ""
      },
      wheelSurf: "", //转盘
      list: {},
      angel: 0, //角度
      descJson: {
        homeJson: {
          mainBgImage: require("../../../../../static/images/lottery/homeBg.png"),
          drawButtonColor: "#F86A63",
          turntableColor: "#e24b43",
          drawbtnRadio: "2",
          turntablebtnRadio: "2"
        },
        winningJson: {
          editUserInfoButtonColor: "#F85037",
          winImage: require("../../../../../static/images/lottery/win.png"),
          bgImage: require("../../../../../static/images/lottery/winBg.png"),
          editUserbtnRadio: "2"
        },
        noWinningJson: {
          aginButtonColor: "#F85037",
          noWinImage: require("../../../../../static/images/lottery/nowin.png"),
          bgImage: require("../../../../../static/images/lottery/winBg.png"),
          noWinningbtnRadio: "2"
        },
        editUserInfoJson: {
          confirmButtonColor: "#F85037",
          bgImage: require("../../../../../static/images/lottery/winBg.png"),
          userInfobtnRadio: "2"
        }
      }, //配置的图片
      actRule: {
        desc: `1，每日签到后，即可获得一次幸运发转盘的机会，仅限当天有效，过期作废。
2，金币抽奖，每10个金豆可兑换一次大转盘机会。
3，所中金豆或积分到【我的账户】中查询。累计达到100金豆及以上，可以兑换相应奖品。
1，每日签到后，即可获得一次幸运发转盘的机会，仅限当天有效，过期作废。
2，金币抽奖，每10个金豆可兑换一次大转盘机会。
3，所中金豆或积分到【我的账户】中查询。累计达到100金豆及以上，可以兑换相应奖品。
1，每日签到后，即可获得一次幸运发转盘的机会，仅限当天有效，过期作废。
`
      },
      formDataList: [
        {
          awardsRefName: "",
          awardsPicUrl: ""
        },
        {
          awardsRefName: "",
          awardsPicUrl: ""
        },
        {
          awardsRefName: "",
          awardsPicUrl: ""
        },
        {
          awardsRefName: "",
          awardsPicUrl: ""
        }
      ],
      templateDescJson: {}, //当前模板关联的系统模板
      homeJsonOpera: {
        drawbtnRadio: "1", //首页抽奖按钮选项,1:默认，2:自定义
        turntablebtnRadio: "1", //首页转盘按钮选项,1:默认，2:自定义
        mainBgImage: "",
        drawButtonColor: "",
        turntableColor: ""
      }, //首页操作项
      winJsonOpera: {
        editUserInfoButtonColor: "",
        winImage: "",
        bgImage: "",
        editUserbtnRadio: "1" //中奖页编辑个人信息按钮选项,1:默认，2:自定义
      }, //中奖页操作项
      nowinJsonOpera: {
        aginButtonColor: "",
        noWinImage: "",
        bgImage: "",
        noWinningbtnRadio: "1" //未中奖页按钮选项,1:默认，2:自定义
      }, //未中奖页操作项
      userInfoJsonOpera: {
        confirmButtonColor: "",
        bgImage: "",
        userInfobtnRadio: "1" //个人信息页按钮选项,1:默认，2:自定义
      } //个人信息页操作项
    };
  },
  methods: {
    //颜色改变
    //colorType：1：默认、2：自定义
    //btnType：draw：抽奖按钮、turntable：转盘颜色、win：中奖按钮、nowin：未中奖按钮
    changeColor(colorType, btnType) {
      if (colorType && btnType) {
        if (colorType == 1) {
          //默认
          if (btnType == "draw") {
            this.homeJsonOpera.drawButtonColor = this.templateDescJson.homeJson.drawButtonColor;
          } else if (btnType == "turntable") {
            this.homeJsonOpera.turntableColor = this.templateDescJson.homeJson.turntableColor;
          } else if (btnType == "win") {
            this.winJsonOpera.editUserInfoButtonColor = this.templateDescJson.winningJson.editUserInfoButtonColor;
          } else if (btnType == "nowin") {
            this.nowinJsonOpera.aginButtonColor = this.templateDescJson.noWinningJson.aginButtonColor;
          } else {
            this.userInfoJsonOpera.confirmButtonColor = this.templateDescJson.editUserInfoJson.confirmButtonColor;
          }
        }
      } else {
        return;
      }
    },
    //初始化操作项，各个页面图片+按钮颜色
    initOpera(type) {
      switch (type) {
        case "draw":
          this.drawButtonColorFlag = true;
          this.homeJsonOpera.drawButtonColor = this.descJson.homeJson.drawButtonColor;
          this.homeJsonOpera.drawbtnRadio = this.descJson.homeJson.drawbtnRadio;
          break;
        case "turntable":
          this.turntableColorFlag = true;
          this.homeJsonOpera.turntableColor = this.descJson.homeJson.turntableColor;
          this.homeJsonOpera.turntablebtnRadio = this.descJson.homeJson.turntablebtnRadio;
          break;
        case "mainBgImage":
          this.mainBgImageFlag = true;
          this.homeJsonOpera.mainBgImage = this.descJson.homeJson.mainBgImage;
          break;
        case "winEditUser":
          this.editUserInfoButtonColorFlag = true;
          this.winJsonOpera.editUserInfoButtonColor = this.descJson.winningJson.editUserInfoButtonColor;
          this.winJsonOpera.editUserbtnRadio = this.descJson.winningJson.editUserbtnRadio;
          break;
        case "winImage":
          this.winImageFlag = true;
          this.winJsonOpera.winImage = this.descJson.winningJson.winImage;
          break;
        case "winBgImage":
          this.winBgImageFlag = true;
          this.winJsonOpera.bgImage = this.descJson.winningJson.bgImage;
          break;
        case "nowinAgin":
          this.aginButtonColorFlag = true;
          this.nowinJsonOpera.aginButtonColor = this.descJson.noWinningJson.aginButtonColor;
          this.nowinJsonOpera.noWinningbtnRadio = this.descJson.noWinningJson.noWinningbtnRadio;
          break;
        case "noWinImage":
          this.noWinImageFlag = true; //没中奖图;
          this.nowinJsonOpera.noWinImage = this.descJson.noWinningJson.noWinImage;
          break;
        case "noWinBgImage":
          this.noWinBgImageFlag = true;
          this.nowinJsonOpera.bgImage = this.descJson.noWinningJson.bgImage;
          break;
        case "userConfirm":
          this.confirmButtonColorFlag = true;
          this.userInfoJsonOpera.confirmButtonColor = this.descJson.editUserInfoJson.confirmButtonColor;
          this.userInfoJsonOpera.userInfobtnRadio = this.descJson.editUserInfoJson.userInfobtnRadio;
          break;
        case "userBgImg":
          this.editBgImageFlag = true;
          this.userInfoJsonOpera.bgImage = this.descJson.editUserInfoJson.bgImage;
          break;
      }
    },
    updateProperty(type) {
      switch (type) {
        case "draw":
          if (!this.homeJsonOpera.drawButtonColor) {
            this.$message({ message: "请选择抽奖按钮颜色", type: "warning" });
            return;
          }
          this.descJson.homeJson.drawButtonColor = this.homeJsonOpera.drawButtonColor;
          this.descJson.homeJson.drawbtnRadio = this.homeJsonOpera.drawbtnRadio;
          this.drawButtonColorFlag = false;
          break;
        case "turntable":
          if (!this.homeJsonOpera.turntableColor) {
            this.$message({ message: "请选择转盘颜色", type: "warning" });
            return;
          }
          this.turntableColorFlag = false;
          this.descJson.homeJson.turntableColor = this.homeJsonOpera.turntableColor;
          this.descJson.homeJson.turntablebtnRadio = this.homeJsonOpera.turntablebtnRadio;
          this.getAngel();
          break;
        case "winEditUser":
          if (!this.winJsonOpera.editUserInfoButtonColor) {
            this.$message({ message: "请选择按钮颜色", type: "warning" });
            return;
          }
          this.editUserInfoButtonColorFlag = false;
          this.descJson.winningJson.editUserInfoButtonColor = this.winJsonOpera.editUserInfoButtonColor;
          this.descJson.winningJson.editUserbtnRadio = this.winJsonOpera.editUserbtnRadio;
          break;
        case "nowinAgin":
          if (!this.nowinJsonOpera.aginButtonColor) {
            this.$message({ message: "请选择按钮颜色", type: "warning" });
            return;
          }
          this.aginButtonColorFlag = false;
          this.descJson.noWinningJson.aginButtonColor = this.nowinJsonOpera.aginButtonColor;
          this.descJson.noWinningJson.noWinningbtnRadio = this.nowinJsonOpera.noWinningbtnRadio;
          break;
        case "userConfirm":
          if (!this.userInfoJsonOpera.confirmButtonColor) {
            this.$message({ message: "请选择按钮颜色", type: "warning" });
            return;
          }
          this.confirmButtonColorFlag = false;
          this.descJson.editUserInfoJson.confirmButtonColor = this.userInfoJsonOpera.confirmButtonColor;
          this.descJson.editUserInfoJson.userInfobtnRadio = this.userInfoJsonOpera.userInfobtnRadio;
          break;
        case "mainBgImage":
          if (!this.homeJsonOpera.mainBgImage) {
            this.$message({ message: "请选择图片", type: "warning" });
            return;
          }
          this.mainBgImageFlag = false;
          this.descJson.homeJson.mainBgImage = this.homeJsonOpera.mainBgImage;
          this.getAngel();
          break;
        case "winImage":
          if (!this.winJsonOpera.winImage) {
            this.$message({ message: "请选择图片", type: "warning" });
            return;
          }
          this.winImageFlag = false;
          this.descJson.winningJson.winImage = this.winJsonOpera.winImage;
          this.getAngel();
          break;
        case "winBgImage":
          if (!this.winJsonOpera.bgImage) {
            this.$message({ message: "请选择图片", type: "warning" });
            return;
          }
          this.winBgImageFlag = false;
          this.descJson.winningJson.bgImage = this.winJsonOpera.bgImage;
          this.getAngel();
          break;
        case "noWinBgImage":
          if (!this.nowinJsonOpera.bgImage) {
            this.$message({ message: "请选择图片", type: "warning" });
            return;
          }
          this.noWinBgImageFlag = false;
          this.descJson.noWinningJson.bgImage = this.nowinJsonOpera.bgImage;
          this.getAngel();
          break;

        case "noWinImage":
          if (!this.nowinJsonOpera.noWinImage) {
            this.$message({ message: "请选择图片", type: "warning" });
            return;
          }
          this.noWinImageFlag = false;
          this.descJson.noWinningJson.noWinImage = this.nowinJsonOpera.noWinImage;
          this.getAngel();
          break;
        case "userBgImg":
          if (!this.userInfoJsonOpera.bgImage) {
            this.$message({ message: "请选择图片", type: "warning" });
            return;
          }
          this.editBgImageFlag = false;
          this.descJson.editUserInfoJson.bgImage = this.userInfoJsonOpera.bgImage;
          this.getAngel();
          break;
      }
    },
    detailFun() {
      this.utils.request.createOrUpdateDetail({ id: this.id }, res => {
        if (res.code == "0000" && res.data) {
          this.descJson = res.data.descJson;
          this.ruleForm.selectModel = res.data.templateId;
          this.ruleForm.name = res.data.templateName;
          this.getAngel();
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    //选择H5模板
    turntableFindAllFun() {
      this.utils.request.turntableFindAll({ templateType: 2 }, res => {
        if (res.code == "0000" && res.data) {
          this.ruleForm.options = res.data;
          this.ruleForm.selectModel = this.ruleForm.options[0].id;
          if (!this.id || this.id == 0) {
            this.descJson = this.ruleForm.options[0].descJson;
          }

          //获取当前关联的系统模板对象
          this.templateDescJson = JSON.parse(
            JSON.stringify(this.ruleForm.options[0].descJson)
          );
          this.getAngel();
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    selectModelChanged(value) {
      if (value && this.ruleForm.options) {
        this.descJson = this.ruleForm.options.filter(f => {
          return f.id == value;
        })[0].descJson;

        this.getAngel();
      }
    },
    save() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let sendData = {
            templateName: this.ruleForm.name,
            templateId: this.ruleForm.selectModel,
            descJson: this.descJson,
            id: this.id
          };
          //id =0 置空
          if (this.id && this.id == 0) {
            sendData.id = null;
          } else {
            sendData.id = this.id;
          }
          this.utils.request.createOrUpdate(sendData, res => {
            if (res.code == "0000") {
              this.$message({ message: "操作成功", type: "success" });
              this.back();
            } else {
              //this.$message({ message: res.msg, type: "error" });
            }
          });
        }
      });
    },

    getBg(response, file, fileList, params) {
      let val = response.data.imageUrl;
      switch (params) {
        case "mainBgImage":
          this.homeJsonOpera.mainBgImage = val;
        case "winBgImage":
          this.winJsonOpera.bgImage = val;
        case "winImage":
          this.winJsonOpera.winImage = val;
        case "noWinBgImage":
          this.nowinJsonOpera.bgImage = val;
        case "noWinImage":
          this.nowinJsonOpera.noWinImage = val;
        case "userBgImg":
          this.userInfoJsonOpera.bgImage = val;
      }
    },
    getAngel() {
      // 清空画布
      var c = this.$refs["myCanvas"];
      var cxt = c.getContext("2d");
      c.height = c.height;
      let turntableColor = "";

      if (this.formDataList) {
        this.angel = 360 / this.formDataList.length;
        // 格式化成插件需要的奖品列表格式
        this.list = this.formDataList.map(m => {
          return {
            id: m.id,
            name: m.awardsRefName,
            image: m.awardsPicUrl
          };
        });
      }
      this.wheelSurf = turntable({
        myCanvas: this.$refs["myCanvas"],
        list: this.list, // 奖品 列表，(必填)
        outerCircle: {
          color: this.descJson.homeJson.turntableColor // 外圈颜色(可选)
        },
        innerCircle: {
          color: "#fff" // 里圈颜色(可选)
        },
        dots: ["#fff", "#fff7af"], // 装饰点颜色(可选)
        disk: [
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af"
        ], //中心奖盘的颜色，默认7彩(可选)
        title: {
          color: "#E34A44",
          font: "8px Arial"
        } // 奖品标题样式(可选)
      });
      this.wheelSurf.init();
    },
    getMainBtn(val) {
      this.homeJsonOpera.drawButtonColor = val;
    },
    getBar(val) {
      this.homeJsonOpera.turntableColor = val;
    },
    getWinBtn(val) {
      this.winJsonOpera.editUserInfoButtonColor = val;
    },
    getNoWinBtn(val) {
      this.nowinJsonOpera.aginButtonColor = val;
    },
    getEditBtn(val) {
      this.userInfoJsonOpera.confirmButtonColor = val;
    },
    // tabs, 删除tab
    removeTabHandle(tabName) {
      this.mainTabs = this.mainTabs.filter(item => item.name !== tabName);
      if (this.mainTabs.length >= 1) {
        // 当前选中tab被删除
        if (tabName === this.mainTabsActiveName) {
          this.$router.push(
            { path: "/Pages/MarketingTools/LargeTurntable/LargeTurntable" },
            () => {
              this.mainTabsActiveName = this.$route.name;
            }
          );
        }
      } else {
        this.$router.push(
          { path: "/Pages/MarketingTools/LargeTurntable/LargeTurntable" },
          () => {
            this.mainTabsActiveName = this.$route.name;
          }
        );
      }
    },
    back() {
      this.removeTabHandle(this.mainTabsActiveName);
    }
  },
  created() {
    this.turntableFindAllFun();
  },
  mounted() {
    if (this.$route.params.id && this.$route.params.id != 0) {
      this.id = Number(this.$route.params.id);
      this.isEdit = true;
      let that = this;
      setTimeout(function() {
        that.detailFun();
      }, 300);
    }
  },
  computed: {
    mainTabs: {
      get() {
        return this.$store.state.tab.mainTabs;
      },
      set(val) {
        this.$store.commit("updateMainTabs", val);
      }
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.tab.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("updateMainTabsActiveName", val);
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import '../../../../assets/css/public.scss';
.page-container {
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  /deep/ .el-form {
    .el-form-item {
      margin-bottom: 30px;

      &.ruleFormName {
        position: relative;
        .txt {
          content: "模板名称不能重复";
          color: #febf5f;
          font-size: 12px;
          position: absolute;
          left: 580px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    &.ruleFormBig {
      .el-input {
        width: 572px;
      }
    }
  }
  .create {
    /deep/ .el-main {
      height: 1300px;
      margin-right: 30px;
      padding: 0;
      flex-shrink: 1;
    }
    .partRight {
      width: 810px;
      height: 1300px;
      flex-shrink: 0;
      /deep/ .el-form {
        .el-form-item {
          margin-right: 20px;
          .el-form-item__content {
            position: relative;
            .tips {
              font-size: 12px;
              color: #999;
              margin-top: 10px;
              span {
                &:first-child {
                  margin-right: 40px;
                }
              }
            }
          }
          .el-input__inner {
            width: 375px;
          }
        }
      }
      .flex {
        align-items: flex-start;
      }

      .el-buttton {
        margin-left: 20px;
      }
    }
  }
  /deep/ .el-dialog {
    .btnColor {
      font-size: 14px;
      color: #333;
      div {
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 60px;
        text-align: center;
        color: #fff;
      }
      &.borderColor {
        div {
          border-width: 10px;
          border-style: solid;
        }
      }
    }
    .colorRadio {
      margin: 30px 0;
      justify-content: center;
      .el-radio {
        height: auto;
      }
      .el-row {
        margin-left: 30px;
        .el-radio {
          margin-right: 10px;
        }
      }
    }
    .avatar-uploader {
      .el-upload {
        cursor: pointer;
        position: relative;
        overflow: hidden;
        .img {
          width: 200px;
          height: 200px;
          border: 1px solid #d9d9d9;
          margin-right: 20px;
          overflow:hidden;
          img {
            height: 100%;
          }
        }
        /deep/ .el-button {
          border-radius: 32px !important;
        }
      }
    }
  }
}
</style>
